<!DOCTYPE>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<!-- 浏览器中显示自己的图表-->
<link rel="icon" href="../img/coco.png" type="image/x-icon" />
<link rel="shortcut icon" href="../img/coco.png" type="image/x-icon" />
<title>vue.js demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="vue.js学习" />
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <style>
        .active{
            width:100px;
            height:100px;
            background:darkgreen;
        }
        .text-danger{
            background: #aa34a0;
        }
    </style>
</head>
    <body>
        <div>
            <audio controls autoplay="autopaly">
                <source src="renxi.mp3" type="audio/mp3" />
            </audio>
        </div>
    	<div id="app">
            <div v-bind:class="{ active:isActive, 'text-danger': hasError }"></div>
            <div v-bind:style="{color:activeColor,fontSize:fontSize + 'px'}">菜鸟教程</div>
        </div>

      <script>
        new Vue({
          el:'#app',
          data:{
            isActive:true,
              hasError:true,
              activeColor:'green',
              fontSize:60
          }
        })
      </script>
    </body>
</html>
